<template>
    <div id="right3"> 
         <div class="rightChart1"> 
            <div class="paoChart" style="width:400px;height:230px" ref="paoChart">

            </div>
         </div> 
    </div>
  </template>
  
  <script type="text/javascript">
import * as echarts from 'echarts'

  export default {
    name: "",
    components: {
    },
    data() {
      return {
         paoChart:'',
         option:'',
         data:[
            {
                name: '临汾',
                value: 14
                },
                {
                name: '忻州',
                value: 12
                },
                {
                name: '吕梁',
                value: 12
                },
                {
                name: '运城',
                value: 12
                },
                {
                name: '大同',
                value: 10
                },
                {
                name: '晋中',
                value: 10
                },
                {
                name: '长治',
                value: 10
                },
                {
                name: '太原',
                value: 7
                },
                {
                name: '晋城',
                value:6
                },
                {
                name: '朔州',
                value: 4
                },
                {
                name: '阳泉',
                value: 3
                }]
      }
    },
    mounted(){
      this.draw()
    },
    methods:{
      draw(){ 
        this.paoChart = echarts.init(this.$refs.paoChart) 
          let [maxValue, temp] = [0, []]
          let data=this.data
            data.forEach((item) => {
                temp.push(item.value)
            })
            maxValue = Math.max.apply(null, temp)
            // 气泡颜色数组
            // const color = ['#00fcf9', '#FACD91', '#516CC0', '#EE6666', '#73C0DE', '#C280FF', '#91CC75', '#ff7123', '#ffc400', '#5e333f']
           const color = ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff']
            // 气泡颜色备份
            let bakeColor = [...color]
            // 气泡数据
            const bubbleData = []
            // 气泡基础大小
            let basicSize = 30
            // 节点之间的斥力因子,值越大,气泡间距越大
            let repulsion = 380
            // 根据气泡数量配置基础大小和斥力因子（以实际情况进行适当调整，使气泡合理分布）
            if (data.length >= 5 && data.length < 10) {
                basicSize = 50
                repulsion = 230
            }
            if (data.length >= 10 && data.length < 20) {
                basicSize = 50
                repulsion = 70
            } else if (data.length >= 20) {
                basicSize = 30
                repulsion = 75
            }
            // 填充气泡数据数组bubbleData
            for (const item of data) {
                // 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
                if (!bakeColor.length) bakeColor = [...color]
                const colorSet = new Set(bakeColor)
                const curIndex = Math.round(Math.random() * (colorSet.size - 1))
                const curColor = bakeColor[curIndex]
                colorSet.delete(curColor)
                bakeColor = [...colorSet]
                // 气泡大小设置
                let size = (item.value * basicSize * 1.2) / maxValue
                if (size < basicSize) size = basicSize
                bubbleData.push({
                    name: item.name,
                    value: item.value,
                    symbolSize: size,
                    draggable: true,
                    itemStyle: {
                      // color: curColor,                 //颜色
                      color:'rgba(51,231,255,0.8)',                 //颜色
                      borderColor: "#000",         //边框颜色
                      borderWidth: 0,              //柱条的描边宽度，默认不描边。
                      borderType: "solid",         //柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。
                      barBorderRadius: 0,          //柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。
                      shadowBlur: 10,              //图形阴影的模糊大小。
                      shadowColor: "#fff",         //阴影颜色
                      shadowOffsetX: 0,            //阴影水平方向上的偏移距离。
                      shadowOffsetY: 0,            //阴影垂直方向上的偏移距离。
                      opacity: 1,  
                    },
                })
            }
           this.option = {
                // backgroundColor: '#fff',
                animationEasingUpdate: 'bounceIn',
                series: [
                    {
                        type: 'graph',
                        layout: 'force',
                        force: {
                            repulsion: repulsion,
                            edgeLength: 10,
                        },
                        // 是否开启鼠标缩放和平移漫游
                        roam: false,
                        label: { normal: { show: true } },
                        data: bubbleData,
                    },
                ],
            }  
        this.paoChart.setOption(this.option)

      }
    }  
  }
  </script>
  
  <style lang="scss" scoped>
      
  </style>
  